<template>
	<view class="top_box">		
		<image :src="list.coverImgUrl" class="top_box_bg"></image>
		<view class="top_box_content">
			<view class="top_box_content_image"><image :src="list.coverImgUrl" mode=""></image></view>
			<view class="top_box_content_info">
				<view class="title">{{list.title}}</view>
				<view class="author">作者：{{list.author}}</view>
				<view class="updata_time">发布时间：{{list.createTime}}</view>
				<view class="description" v-if="list.description" @tap="open">{{list.description}}</view>
			</view>
		</view>
		<view class="top_box_count" v-if="list.subscribedCount">
			<view class="item">
				<uni-icons type="calendar-filled" color="#fff" size="24"></uni-icons>
				<view>{{list.subscribedCount}}</view>
			</view>
			<view class="item" @tap="popup" v-if="list.commentCount">
				<view class="iconfont icon-liuyanjianyi"></view>
				<view>{{list.commentCount}}</view>
			</view>
			<view class="item" v-if="list.shareCount">
				<view class="iconfont icon-fenxiang"></view>
				<view>{{list.shareCount}}</view>
			</view>
		</view>
		
		<uni-popup ref="popup" background-color="#fff" :mask-click="false">
			<view class="close" @tap="close"><uni-icons type="closeempty" size="26"></uni-icons></view>
			<view class="popup-content">{{list.description}}</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"u-top-pic",
		
		props:{
			list: {
				type: Object,
				dafeult: {}
			}
		},
		
		data() {
			return {
				
			}
		},
		
		methods:{
			popup(){
				uni.$emit('popupComment', 'popupComment')
			},
			
			open(){
				this.$refs.popup.open('center');
			},
			
			close(){
				this.$refs.popup.close();
			}
		}
	}
</script>

<style scoped>
	@import url("@/static/css/iconfont.css");
	.top_box{
		width: 100%;
	}
	
	/* #ifdef H5 */
		.top_box_bg{
			height: 190px !important;
		}
	/* #endif */
	
	.top_box_bg{
		width: 100%;
		height: 240px;
		position: absolute;
		top: 0;
		left: 0;
		background-size: 100% 100%;
		filter: blur(5px);
		z-index: 1;
	}
	
	.top_box_content{
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		z-index: 2;
		margin-top: 2%;
	}
	
	.top_box_content_image{
		height: 80px;
		z-index: 2;
	}
	
	.top_box_content_image image{
		width: 80px;
		height: 80px;
	}
	
	.top_box_content_info{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		color: #fff;
		z-index: 3;
	}
	
	.top_box_content_info .title{
		font-size: 14px;
	}
	
	.top_box_content_info .author{
		font-size: 13px;
	}
	
	.top_box_content_info .updata_time{
		font-size: 12px;
	}
	
	.top_box_count{
		width: 90%;
		height: 40px;
		margin: 10% auto 0 auto;
		display: flex;
		justify-content: space-evenly;
	}
	
	.top_box_count .item{
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #fff;
		z-index: 4;
	}
	
	.description{
		font-size: 13px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.close{
		text-align: right;
	}
	
	/deep/.center{
		width: 80%;
		padding: 16px 10px 40px 10px;
		white-space: normal;
		border-radius: 8px;
		font-size: 14px;
		line-height: 1.6;
		text-indent: 2em;
	}
</style>